<template>
    <div class="new-blog col-sm-8">
        <items :title="title" :items="list"/>
        <page :total="total" :page="page" :url="'/list' + (id ? '/' + id : '')" :limit="limit" />
    </div>
</template>

<script>
    import Items from '../article/Items'
    import Page from './Page'
    import {mapState, mapActions, mapMutations} from 'vuex'

    export default {
        components: {
            Items,
            Page
        },
        props: {
            id: {
                default: 0
            },
            page: {
                type: Number,
                default: 1
            }
        },
        watch: {
            id(value) {
                this.setPage(1);
                this.setTypeId(value);
                this.getList();
            },
            page(value) {
                this.setPage(value);
                this.getList();
            }
        },
        name: "ArticleList",
        data() {
            return {
                title: "最新文章",
            }
        },
        methods: {
            ...mapMutations("list", ["setTypeId", "setPage"]),
            ...mapActions("list", ["getList"]),
        },
        computed: mapState('list', [
            'list',
            'limit',
            'total'
        ]),

        created() {
            this.getList();
        }
    }
</script>